<template>
	<view>
		<view class="exchange_header">
			<text>可用积极分：￥3456.89</text>
			<text class="f_red">兑换记录</text>
		</view>
		<view class="exchange_info">
			<view class="input-money">
				<view class="ex_header"><text>兑换积分（<span class="f_red">当前只支持500及500的倍数兑换</span></text>）</view>
				<view class="input-num">
					<input type="text" placeholder="请输入兑换积分" placeholder-style="font-size:22px"/>
				</view>
			</view>
			<text class="tixian-f">兑换方式：</text>
			<view class="tixian-type">
				<text>TS</text>
				<img src="../../static/tixian_gou.png" />
			</view>
			<view class="exchange_wrapper">
				<view class="wrapper_item">
					<text class="wrapper_item_t">交易网络链</text>
					<text>BSC/67FG</text>
				</view>
				<view class="wrapper_item">
					<text class="wrapper_item_t">USDT钱包地址</text>
				</view>
				<view class="wrapper_item2">
					<text class="wrapper_item_t"><input type="text" placeholder="请输入USDT钱包地址"/></text>
				</view>
				<view class="desc">注：请确保您的地址与当前支持网络属于同一网络，否则您的兑换无法到账！</view>
			</view>
			<view class="Exchange_login">
				<text>登录密码</text>
				<input type="safe-password" placeholder="请输入登录密码"/>
			</view>
		</view>
		<button class="exchange_btn">确认退出</button>
	</view>
</template>

<script>
</script>

<style scoped>
	.exchange_header {
		height: 50px;
		background: #fff;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
	}

	.f_red {
		color: #fc4141;
	}

	.exchange_info {
		margin-top: 10px;
		background-color: #fff;
		padding-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.exchange_info .input-money {
		margin: 10px 15px 0 15px;
		background: hsla(0, 0%, 84.7%, 0);
		border: 1px solid #f2f2f2;
		padding: 15px;
		display: flex;
		flex-direction: column;
	}
	.input-money .ex_header{
	    font-size: 15px;
	    font-weight: 400;
	    color: #666;
	    line-height: 23px;
	}
	

	.input-money .input-num{
	    margin-top: 25px;
	    align-items: center;
	    padding-bottom: 10px;
	    border-bottom: 1px solid #f2f2f2;
		display: flex;
		flex-direction: row;
	}
	


	.tixian-f {
		margin-left:15px;
		margin-top:25px;
		height: 30px;
		align-items: center;
		border-bottom: 1px solid #eee;
		font-size: 15px;
		font-weight: 400;
		color: #999;
		line-height: 23px;
	}

	.tixian-type {
		margin: 0 15px;
		height: 43px;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-direction: row;
	}
	.tixian-type img{
		width:20px;
		height: 20px;
	}

	.exchange_wrapper {
		background-color: #fff;
		padding: 0 15px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.exchange_wrapper .wrapper_item {
		height: 49px;
		border-bottom: 1px solid #eee;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.wrapper_item_t {
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
		width: 247px;
	}

	.wrapper_item2 {
		min-height: 45px;
	}

	.exchange_wrapper .desc {
		font-size: 14px;
		background-color: #eee;
		color: #fc4141;
		padding: 4px;
	}

	.Exchange_login {
		margin: 0 15px;
		height: 43px;
		justify-content: space-between;
		display: flex;
		flex-direction: row;
	}
	.Exchange_login text{
		font-size: 15px;
		font-weight: 400;
		color: #333;
		line-height: 23px;
	}



	.exchange_btn {
		margin: 20px 15px;
		height: 46px;
		border-radius: 8px;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		line-height: 27px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>